<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网页前端</title>
<style type="text/css">
*{
	margin:0;
	padding:0;
}
.clear{
	clear:both;
}
ul{
	list-style:none;
}
#daohang{
	height:183px;
	width:100%;
	background-color:#CCC;
	margin:0 auto;
}
#dashiji{
	width:1100px;
	height:500px;
	margin:0 auto;
}
.jindu{
	width:797px;
	height:500px;
	float:left;
}
.date{
	width:69px;
	height:40px;
	padding-left:20px;
	padding-bottom:10px;
	margin-left:6px;
	margin-top:42px;
	background-color:#d8f0fc;
	border-radius:10px;
	font:"Arial Black", Gadget, sans-serif;
	font-size:36px;
}
.jiao1{
	width:20px;
	height:20px;
	transform:rotate(45deg);
	background-color:#7a93af;
	position:absolute;
	top:470px;
	left:425px;
}
.jiao2{
	width:20px;
	height:20px;
	transform:rotate(45deg);
	background-color:#7a93af;
	position:absolute;
	top:470px;
	left:880px;
}
.jiao3{
	width:20px;
	height:20px;
	transform:rotate(45deg);
	background-color:#7a93af;
	position:absolute;
	top:970px;
	left:425px;
}
.jiao4{
	width:20px;
	height:20px;
	transform:rotate(45deg);
	background-color:#7a93af;
	position:absolute;
	top:970px;
	left:880px;
}
.dashi1{
	float:left;
	width:424px;
	height:174px;
	margin-left:32px;
	margin-top:116px;
	background-color:#7a93af;
	border-radius:10px;
	box-shadow:3px 3px 3px #999;
}
.dashi2{
	float:left;
	width:219px;
	height:174px;
	margin-left:30px;
	margin-top:116px;
	background-color:#7a93af;
	border-radius:10px;
	box-shadow:3px 3px 3px #999;
}
.bianyuan{
	width:6px;
	height:900px;
	background-color:#d7d7d7;
	float:left;
	border-radius:5px;
	margin-top:16px;
	position:absolute;
	right:700px;
}
.shijian{
	width:264px;
	height:100px;
	float:left;
	background-color:#FFF;
	margin-top:27px;
	padding-left:15px;
	position:absolute;
	left:1250px;
}
.reserve{
	width:37px;
	height:37px;
	background-color:#000;
	margin-left:10px;
	float:left;
	position:absolute;
	left:-10px;
}
.mouth{
	width:87px;
	height:400px;
	margin-top:200px;
	padding-left:13px;
	padding-top:73px;
	position:absolute;
	font-family:"Kozuka Mincho Pr6N L";
	font-size:36px;
	z-index:1;
}
.mouthjianbian{
	width:87px;
	height:700px;
	margin-top:43px;
	padding-left:13px;
	padding-top:0px;
	position:fixed;
	background: linear-gradient(180deg, rgba(255,255,255,1),rgba(255,255,255,1),rgba(255,255,255,1),rgba(255,255,255,1),rgba(163,0,0,0),rgba(163,0,0,0),rgba(163,0,0,0),rgba(255,255,255,1),rgba(255,255,255,1),rgba(255,255,255,1),rgba(255,255,255,1)); 
	z-index:2; 
}
.year{
	width:177px;
	height:350px;
	margin-top:200px;
	margin-left:50px;
	padding-left:90px;
	padding-right:10px;
	padding-top:73px;
	position:absolute;
	font:Arial, Helvetica, sans-serif;
	font-size:36px;
	z-index:1;
}
.yearjianbian{
	width:177px;
	height:400px;
	margin-top:43px;
	padding-left:13px;
	padding-top:0px;
	position:fixed;
	background: linear-gradient(180deg, rgba(255,255,255,1),rgba(255,255,255,1),rgba(255,255,255,1),rgba(255,255,255,1),rgba(255,255,255,1),rgba(255,255,255,1),rgba(255,255,255,1),rgba(255,255,255,1),rgba(255,255,255,1),rgba(163,0,0,0),rgba(163,0,0,0),rgba(163,0,0,0),rgba(255,255,255,1),rgba(255,255,255,1),rgba(255,255,255,1),rgba(255,255,255,1)); 
	z-index:2; 
	left:1400px;
	bottom:300px;
}
</style>
</head>

<body>
<div id="daohang"></div>
<div id="dashiji">
    <div class="jindu">
        <div class="date">
            16
        </div>
        <div class="jiao1">
        </div>
        <div class="dashi1">
        </div>
        <div class="jiao2">
        </div>
        <div class="dashi2">
        </div>
    </div>
    <div class="jindu">
        <div class="date">
            16
        </div>
        <div class="jiao3">
        </div>
        <div class="dashi1">
        </div>
        <div class="jiao4">
        </div>
        <div class="dashi2">
        </div>
    </div>
    <div class="bianyuan"></div>
    <div class="shijian">
    <div class="reserve"></div>
    <div class="reserve"></div>
    <div class="mouth">
    	<ul>一月二月三月四月五月六月七月八月九月十月</ul>
    </div>
    <div class="mouthjianbian"></div>
    <div class="year">2016<br>2015<br>2014<br></div>
    <div class="yearjianbian"></div>
    </div>
</div>
</body>
</html>
